<%--
  Created by IntelliJ IDEA.
  User: Love
  Date: 2024/6/26
  Time: 14:15
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <!-- 引入样式文件 -->
    <link href="${pageContext.request.contextPath}/statics/css/eui/index.css" rel="stylesheet">
</head>
<!-- 引入JS文件 -->
<script src="${pageContext.request.contextPath}/statics/vue/vue.js"></script>
<script src="${pageContext.request.contextPath}/statics/vue/index.js"></script>
<script src="${pageContext.request.contextPath}/statics/vue/axios.min.js"></script>
<body>
<div id="app">

    <%--    搜索框    --%>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item>
            <el-input v-model="formInline.softwareName" placeholder="软件名称"></el-input>
        </el-form-item>
        <el-form-item>
            <el-input v-model="formInline.APKName" placeholder="APK名称"></el-input>
        </el-form-item>
        <el-form-item>
            <el-select v-model="formInline.status" placeholder="状态">
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-select v-model="formInline.flatformId" placeholder="所属平台">
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-select v-model="formInline.categoryLevel1" placeholder="一级分类">
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-select v-model="formInline.categoryLevel2" placeholder="二级分类">
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-select v-model="formInline.categoryLevel3" placeholder="三级分类">
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button id="select" type="primary" @click="onSubmit">查询</el-button>
            <el-button id="add" type="primary" @click="onSubmit">添加</el-button>
        </el-form-item>
    </el-form>
    <%--    搜索框     --%>

    <%--表格显示--%>
<%--    <template>--%>
        <el-table
                :data="tableData"
                border
                style="width: 100%">
            <el-table-column
                    fixed
                    prop="softwareName"
                    label="软件名称"
                    width="220">
            </el-table-column>
            <el-table-column
                    prop="apkname"
                    label="APK名称"
                    width="230">
            </el-table-column>
            <el-table-column
                    prop="logoPicPath"
                    label="logo图片"
                    width="120">

                <template slot-scope="scope">
<%--                <div class="demo-image">--%>
<%--                    <div class="block" v-for="fit in fits" :key="fit">--%>
<%--                        <el-image--%>
<%--                                style="width: 100px; height: 100px"--%>
<%--                                :src="scope.row.logoPicPath"--%>
<%--                                :fit="fit"></el-image>--%>
<%--                    </div>--%>
<%--                    --%>
<%--                </div>--%>
    <div class="demo-image">
        <div class="block" v-for="fit in fits" :key="fit">
            <span class="demonstration">{{ fit }}</span>
            <el-image
                    style="width: 100px; height: 100px"
                    :src="scope.row.logoPicPath"
                    :fit="fit"></el-image>
        </div>
    </div>
                </template>
            </el-table-column>
            <el-table-column
                    label="游戏分类"
                    width="130">
                <template slot-scope="scope">
                    {{scope.row.categoryName1}}-->{{scope.row.categoryName2}}-->{{scope.row.categoryName3}}
                </template>
            </el-table-column>
            <el-table-column
                    prop="flatformId"
                    label="所属平台"
                    width="260">
                <template slot-scope="scope">
                    <span v-if="scope.row.flatformId==1">手机</span>
                    <span v-if="scope.row.flatformId==2">平板</span>
                    <span v-if="scope.row.flatformId==3">通用</span>
                </template>
            </el-table-column>
            <el-table-column
                    prop="status"
                    label="状态"
                    width="140">
                <template slot-scope="scope">
                    <span v-if="scope.row.status==1">待审核</span>
                    <span v-if="scope.row.status==2">审核通过</span>
                    <span v-if="scope.row.status==3">审核不通过</span>
                    <span v-if="scope.row.status==4">已上架</span>
                    <span v-if="scope.row.status==5">已下架</span>
                </template>
            </el-table-column>
            <el-table-column
                    prop="versionNo"
                    label="最新版本号"
                    width="160">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="100">
                <template slot-scope="scope">
                    <el-dropdown>
                      <span class="el-dropdown-link">
                        操作<i class="el-icon-arrow-down el-icon--right"></i>
                      </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>修改</el-dropdown-item>
                            <el-dropdown-item>删除</el-dropdown-item>
                            <el-dropdown-item>上架</el-dropdown-item>
                            <el-dropdown-item>下架</el-dropdown-item>
                            <el-dropdown-item>添加版本</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </template>
            </el-table-column>
        </el-table>
<%--    </template>--%>
    <%--表格显示--%>

    <%--    分页显示    --%>
        <el-pagination
                @current-change="handleCurrentChange"
                layout="total, prev, pager, next"
                :total="pageTotalCount * 10">
        </el-pagination>
    <%--    分页显示    --%>
</div>
</body>
</html>
<script>
    new Vue({
        el: '#app',
        components: {},
        data() {
            // 这里存放数据,
            return {
                fits:[],
                // fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
                // url: '"F:\ssm内测考试素材\ssm内测考试素材\头像图片\1583241943885551-lp.jpg"',
                formInline: {
                    softwareName: '',
                    APKName:'',
                    status: '',
                    flatformId:'',
                    categoryLevel1:'',
                    categoryLevel2:'',
                    categoryLevel3:'',
                    logoPicPath:''
                },
                tableData:[],
            }
        },
        // 监听属性 类似于data概念,
        computed: {},
        // 监控data中的数据变化,
        watch: {},
        // 方法集合,
        methods: {
          async  handleCurrentChange(val) {

                console.log(`当前页: ${val}`);
            },
            async onSubmit() {
                let arr=await axios({
                    url:'/appInfo/appInfoList',
                    method:'POST',
                    data:this.formInline
                })
                debugger
                this.tableData=arr.data.data.appInfoList;
                console.log(arr)
            },

        },
        // 生命周期 - 创建完成（可以访问当前this实例）,
        created() {
            this.onSubmit();
        },
        // 生命周期 - 挂载完成（可以访问DOM元素）,
        mounted() {
        },
        beforeCreate() {
        }, // 生命周期 - 创建之前,
        beforeMount() {
        }, // 生命周期 - 挂载之前,
        beforeUpdate() {
        }, // 生命周期 - 更新之前,
        updated() {
        }, // 生命周期 - 更新之后,
        beforeDestroy() {
        }, // 生命周期 - 销毁之前,
        destroyed() {
        }, // 生命周期 - 销毁完成,
        activated() {
        } // 如果页面有keep-alive缓存功能，这个函数会触发,
    })
</script>
<style lang='scss' scoped>
    /*@import url(""); 引入公共css类*/
    #select, #add {
        background-color: #409EFF;
        border: 0 solid #409EFF;
    }
    #app{
        width: 100%;
        height: 100%;
    }
    .el-dropdown-link {
        cursor: pointer;
        color: #409EFF;
    }
    .el-icon-arrow-down {
        font-size: 12px;
    }
</style>

